<template>
  <view class="view-content">
    <s-nav title="家庭信息" />
    <s-content>
      <view class="main">
        <!-- 列表 -->
        <view class="applicant-from">
          <!-- 表单数据 -->
          <uni-forms :modelValue="formData" ref="form" :rules="rules">
            <view class="body-container">
              <uni-forms-item required label="姓名" name="name">
                <uni-easyinput
                  v-model="formData.name"
                  type="text"
                  maxlength="50"
                  placeholder="请输入"
                />
              </uni-forms-item>
              <uni-forms-item required label="性别" name="gender">
                <s-picker
                  title="选择性别"
                  :dataSet="array"
                  @change="change($event, 'gender')"
                />
              </uni-forms-item>
              <uni-forms-item required name="nation" label="民族">
                <s-picker
                  title="选择民族"
                  :dataSet="array2"
                  @change="change($event, 'nation')"
                />
              </uni-forms-item>
              <uni-forms-item required name="domicilePlace" label="户籍所在地">
                <uni-easyinput
                  type="text"
                  v-model="formData.domicilePlace"
                  maxlength="50"
                  placeholder="请输入"
                />
              </uni-forms-item>
              <uni-forms-item required name="cardNum" label="身份证号">
                <uni-easyinput
                  type="idcard"
                  maxlength="18"
                  v-model="formData.cardNum"
                  placeholder="请输入"
                />
              </uni-forms-item>
            </view>
            <view class="body-container" @click="skip">
              <uni-forms-item
                required
                maxlength="50"
                name="xsbsCertifyFamilyList"
                label="家庭成员"
              >
                <view class="people-num">
                  <text>{{ formData.xsbsCertifyFamilyList.length }}</text>
                  <img src="../static/image/down-icon.png" mode="" />
                </view>
              </uni-forms-item>
            </view>
          </uni-forms>
        </view>
        <view class="footer-container">
          <s-btn
            title="提交"
            @submit="submit"
            style="width: 100%; background: #02b494"
          />
        </view>
      </view>
    </s-content>
  </view>
</template>

<script>
import { post } from "../../utils/request";
import { checkIsJSON } from "../static/js/typeJson.js";
import { nation } from "../static/js/nationality.js";
export default {
  data() {
    return {
      formData: {
        xsbsCertifyFamilyList: [],
      }, // 表单数据
      array: ["男", "女"],
      array2: [
        // 民族
      ],
      rules: {
        // 表单校验规则
        name: {
          rules: [
            {
              required: true,
              errorMessage: "请输入姓名",
            },
          ],
        },
        gender: {
          rules: [
            {
              required: true,
              errorMessage: "请选择性别",
            },
          ],
        },
        nation: {
          rules: [
            {
              required: true,
              errorMessage: "请选择民族",
            },
          ],
        },
        domicilePlace: {
          rules: [
            {
              required: true,
              errorMessage: "请输入户籍所在地",
            },
          ],
        },
        cardNum: {
          rules: [
            {
              required: true,
              errorMessage: "请输入身份证号",
            },
          ],
        },
        xsbsCertifyFamilyList: {
          rules: [
            {
              required: true,
              errorMessage: "请录入家庭成员",
            },
          ],
        },
      },
    };
  },
  /**
   * 获取上一个页面传递的参数
   * @param {*} option 路由数据
   */
  onLoad(option) {
    if (option.params && checkIsJSON(option.params)) {
      this.formData = {
        ...this.formData,
        ...JSON.parse(option.params),
      };
    }
  },
  /**
   * 初始化
   */
  created() {
    this.array2 = nation;
  },
  methods: {
    /**
     * TextPicker回调表单赋值
     * @param {Object} value 回调数据
     * @param {Object} code	表单赋值的name
     */
    change(value, code) {
      this.$refs.form.setValue(code, value);
    },
    /**
     * 删除成员关系
     * @param {number} index 下标
     */
    delData(index) {
      if (index || index === 0) {
        this.$delete(this.formData.xsbsCertifyFamilyList, index);
      }
    },
    /**
     * 获取下降页面传递的参数
     * @param {*} object 参数数据
     */
    otherFun(object) {
      if (object) {
        if (!object.id) object.id = object.index + 1;
        this.$set(this.formData.xsbsCertifyFamilyList, object.index, object);
      }
    },
    /**
     * 跳转家庭成员页
     */
    skip() {
      const dataList = JSON.stringify(this.formData.xsbsCertifyFamilyList);
      uni.navigateTo({
        url: `/amenity/pages/family/familyDetails?dataList=${dataList}`,
      });
    },
    /**
     * 表单提交
     */
    submit() {
      this.$refs.form
        .validate()
        .then((res) => {
          uni.showLoading({
            title: "提交中",
            mask: true,
          });
          post("/api/application/xsbsCertifyInfo/app/saveCertifyInfo", {
            ...res,
            ...this.formData,
          })
            .then((value) => {
              uni.hideLoading();
              if (value.code === "000000") {
                uni.showToast({
                  title: "操作成功",
                  duration: 1000,
                });
                return uni.navigateBack({
                  delta: 2,
                  success: () => {
                    uni.showToast({
                      title: value.message || "操作失败",
                      duration: 1000,
                    });
                  },
                });
              }
            })
            .catch(() => {
              uni.hideLoading();
            });
        })
        .catch((err) => {
          console.log("表单错误信息：", err);
        });
    },
  },
};
</script>
<style lang="scss">
@import "../static/css/form.scss";

.applicant-from {
  box-shadow: none;

  .body-container {
    box-shadow: 0px 0px 16rpx 0px $themeColor;
    border-radius: 16rpx;

    &:not(:last-child) {
      margin-bottom: 24rpx;
    }

    .people-num {
      display: flex;
      align-items: center;

      text {
        @include fontStyle;
      }

      image {
        width: 40rpx;
        height: 40rpx;
      }
    }
  }
}
</style>
